// 又一次定义我们的 log 函数
var log = function () {
    console.log.apply(console, arguments)
}

/*
jQuery 是一个常用的 js 库, 提供了 DOM 操作, AJAX 封装, 兼容性等功能
具体的, 上课再说

你需要新建一个 HTML 文件并且引入 jQuery 的 js 代码才能使用 js


按照功能, jQuery 常见的用法划分如下
*/
$('body')
// a. 选择器
// 1. $
//1.1 原来：document.querySelectorAll('.todo-cell')----现在：$('.todo-cell')
//1.2 jquery选择器选出的一定是一个数组（包括：空数组：[]）；优于之前
//1.3 jquery选择器.addClass('gua')也是全部添加；优于之前：循环添加

// 2. find
// 3. siblings
// 4. closest, parent
// 4.1 场景：div复杂+delete按钮绑定事件
// 方法1：原来：div.parent.parent麻烦，也容易错（前端页面如果改变）
// 方法2：现在：
// var deleteButtons = $('.delete-button')
// console.log(deleteButtons)
// deleteButtons.on('click', function(event){
//     console.log('click')
//     jquery特质：给选择器，返回选择器；
//     var button = $(event.target)
//     button.closest('.todo-cell').remove()
// })
// closet:找button最近的父节点
$('#id-button-add')
$('.cell')

/*
b. dom 操作
1. append
2. remove
3. empty
4. show, hide, toggle
 */

/*
c. class 操作
1. addClass removeClass
2. toggleClass
 */

/*
d. 属性、特性操作
1. attr, prop, data
2. removeAttr
 */

//$('input').attr('id')
// 'id-input-add'
//注意：<input id="id-input-add" name="name" value=""> ：name属性给后端使用
// $('input').attr('name')
// 'name'

// 场景1：<div>的data数据获取方式
// <div class="todo-cell" data-id='401'>
//================================================
// 方法1：DOM api获取id
// $('.todo-cell')
// >> jQuery.fn.init(2) [div.todo-cell, div.todo-cell, prevObject: jQuery.fn.init(1)]
// $('.todo-cell')[0]
// >> <div class=​"todo-cell" data-id=​"401">​…​</div>​
// var domDiv = $('.todo-cell')[0]
// >> undefined
// domDiv
// >> <div class=​"todo-cell" data-id=​"401">​…​</div>​
// domDiv.dataset.id
// '401'
//方法2：jqueryAPI方式获取
//var jqdiv = $($('.todo-cell')[0])
//>> jqdiv.data('id')
//==============================================

/*

e. 取值
1. val:同dom的value()
2. text:用来取元素属性,相当于DOM的innertext(),
3. html:相当于DOM的innerHTML()
区别:
// 场景1：$('input')
// $('input')
// jQuery.fn.init [input#id-input-add, prevObject: jQuery.fn.init(1)]0: input#id-input-addaccept: ""accessKey: ""align: ""alt: ""ariaAtomic: nullariaAutoComplete: nullariaBusy: nullariaChecked: nullariaColCount: nullariaColIndex: nullariaColSpan: nullariaCurrent: nullariaDescription: nullariaDisabled: nullariaExpanded: nullariaHasPopup: nullariaHidden: nullariaKeyShortcuts: nullariaLabel: nullariaLevel: nullariaLive: nullariaModal: nullariaMultiLine: nullariaMultiSelectable: nullariaOrientation: nullariaPlaceholder: nullariaPosInSet: nullariaPressed: nullariaReadOnly: nullariaRelevant: nullariaRequired: nullariaRoleDescription: nullariaRowCount: nullariaRowIndex: nullariaRowSpan: nullariaSelected: nullariaSetSize: nullariaSort: nullariaValueMax: nullariaValueMin: nullariaValueNow: nullariaValueText: nullassignedSlot: nullattributeStyleMap: StylePropertyMap {size: 0}attributes: NamedNodeMap {0: id, 1: name, 2: value, id: id, name: name, value: value, length: 3}autocapitalize: ""autocomplete: ""autofocus: falsebaseURI: "http://localhost:63342/WEB%E5%89%8D%E7%AB%AF/%E8%AF%BE%E7%A8%8B13()/fe13.html?_ijt=c2qhch8s9d5v55ho5ke0s8m5pl"checked: falsechildElementCount: 0childNodes: NodeList []children: HTMLCollection []classList: DOMTokenList [value: '']className: ""clientHeight: 17clientLeft: 2clientTop: 2clientWidth: 166contentEditable: "inherit"dataset: DOMStringMap {}defaultChecked: falsedefaultValue: ""dir: ""dirName: ""disabled: falsedraggable: falseelementTiming: ""enterKeyHint: ""files: nullfirstChild: nullfirstElementChild: nullform: nullformAction: "http://localhost:63342/WEB%E5%89%8D%E7%AB%AF/%E8%AF%BE%E7%A8%8B13()/fe13.html?_ijt=c2qhch8s9d5v55ho5ke0s8m5pl"formEnctype: ""formMethod: ""formNoValidate: falseformTarget: ""height: 0hidden: falseid: "id-input-add"incremental: falseindeterminate: falseinnerHTML: ""innerText: ""inputMode: ""isConnected: trueisContentEditable: falsejQuery311036393741107120551: {events: {…}, handle: ƒ}labels: NodeList []lang: ""lastChild: nulllastElementChild: nulllist: nulllocalName: "input"max: ""maxLength: -1min: ""minLength: -1multiple: falsename: "name"namespaceURI: "http://www.w3.org/1999/xhtml"nextElementSibling: brnextSibling: textnodeName: "INPUT"nodeType: 1nodeValue: nullnonce: ""offsetHeight: 21offsetLeft: 8offsetParent: bodyoffsetTop: 10offsetWidth: 170onabort: nullonanimationend: nullonanimationiteration: nullonanimationstart: nullonauxclick: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonbeforexrselect: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nullonformdata: nullonfullscreenchange: nullonfullscreenerror: nullongotpointercapture: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonlostpointercapture: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonpointercancel: nullonpointerdown: nullonpointerenter: nullonpointerleave: nullonpointermove: nullonpointerout: nullonpointerover: nullonpointerrawupdate: nullonpointerup: nullonprogress: nullonratechange: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonselectionchange: nullonselectstart: nullonstalled: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullontransitioncancel: nullontransitionend: nullontransitionrun: nullontransitionstart: nullonvolumechange: nullonwaiting: nullonwebkitanimationend: nullonwebkitanimationiteration: nullonwebkitanimationstart: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwebkittransitionend: nullonwheel: nullouterHTML: "<input id=\"id-input-add\" name=\"name\" value=\"\">"outerText: ""ownerDocument: documentparentElement: div.formparentNode: div.formpart: DOMTokenList [value: '']pattern: ""placeholder: ""prefix: nullpreviousElementSibling: nullpreviousSibling: textreadOnly: falserequired: falsescrollHeight: 17scrollLeft: 0scrollTop: 0scrollWidth: 166selectionDirection: "forward"selectionEnd: 0selectionStart: 0shadowRoot: nullsize: 20slot: ""spellcheck: truesrc: ""step: ""style: CSSStyleDeclaration {accentColor: '', additiveSymbols: '', alignContent: '', alignItems: '', alignSelf: '', …}tabIndex: 0tagName: "INPUT"textContent: ""title: ""translate: truetype: "text"useMap: ""validationMessage: ""validity: ValidityState {valueMissing: false, typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, …}value: ""valueAsDate: nullvalueAsNumber: NaNvirtualKeyboardPolicy: ""webkitEntries: []webkitdirectory: falsewidth: 0willValidate: true[[Prototype]]: HTMLInputElement(...)length: 1prevObject: jQuery.fn.init [document]0: documentlength: 1[[Prototype]]: Object(0)add: ƒ ( selector, context )addBack: ƒ ( selector )addClass: ƒ ( value )after: ƒ ()ajaxComplete: ƒ ( fn )ajaxError: ƒ ( fn )ajaxSend: ƒ ( fn )ajaxStart: ƒ ( fn )ajaxStop: ƒ ( fn )ajaxSuccess: ƒ ( fn )animate: ƒ ( prop, speed, easing, callback )append: ƒ ()appendTo: ƒ ( selector )attr: ƒ ( name, value )before: ƒ ()bind: ƒ ( types, data, fn )blur: ƒ ( data, fn )change: ƒ ( data, fn )children: ƒ ( until, selector )clearQueue: ƒ ( type )click: ƒ ( data, fn )clone: ƒ ( dataAndEvents, deepDataAndEvents )closest: ƒ ( selectors, context )constructor: ƒ ( selector, context )contents: ƒ ( until, selector )contextmenu: ƒ ( data, fn )css: ƒ ( name, value )data: ƒ ( key, value )dblclick: ƒ ( data, fn )delay: ƒ ( time, type )delegate: ƒ ( selector, types, data, fn )dequeue: ƒ ( type )detach: ƒ ( selector )each: ƒ ( callback )empty: ƒ ()end: ƒ ()eq: ƒ ( i )extend: ƒ ()fadeIn: ƒ ( speed, easing, callback )fadeOut: ƒ ( speed, easing, callback )fadeTo: ƒ ( speed, to, easing, callback )fadeToggle: ƒ ( speed, easing, callback )filter: ƒ ( selector )find: ƒ ( selector )finish: ƒ ( type )first: ƒ ()focus: ƒ ( data, fn )focusin: ƒ ( data, fn )focusout: ƒ ( data, fn )get: ƒ ( num )has: ƒ ( target )hasClass: ƒ ( selector )height: ƒ ( margin, value )hide: ƒ ( speed, easing, callback )hover: ƒ ( fnOver, fnOut )html: ƒ ( value )index: ƒ ( elem )init: ƒ ( selector, context, root )innerHeight: ƒ ( margin, value )innerWidth: ƒ ( margin, value )insertAfter: ƒ ( selector )insertBefore: ƒ ( selector )is: ƒ ( selector )jquery: "3.1.1"keydown: ƒ ( data, fn )keypress: ƒ ( data, fn )keyup: ƒ ( data, fn )last: ƒ ()length: 0load: ƒ ( url, params, callback )map: ƒ ( callback )mousedown: ƒ ( data, fn )mouseenter: ƒ ( data, fn )mouseleave: ƒ ( data, fn )mousemove: ƒ ( data, fn )mouseout: ƒ ( data, fn )mouseover: ƒ ( data, fn )mouseup: ƒ ( data, fn )next: ƒ ( until, selector )nextAll: ƒ ( until, selector )nextUntil: ƒ ( until, selector )not: ƒ ( selector )off: ƒ ( types, selector, fn )offset: ƒ ( options )offsetParent: ƒ ()on: ƒ ( types, selector, data, fn )one: ƒ ( types, selector, data, fn )outerHeight: ƒ ( margin, value )outerWidth: ƒ ( margin, value )parent: ƒ ( until, selector )parents: ƒ ( until, selector )parentsUntil: ƒ ( until, selector )position: ƒ ()prepend: ƒ ()prependTo: ƒ ( selector )prev: ƒ ( until, selector )prevAll: ƒ ( until, selector )prevUntil: ƒ ( until, selector )promise: ƒ ( type, obj )prop: ƒ ( name, value )push: ƒ push()pushStack: ƒ ( elems )queue: ƒ ( type, data )ready: ƒ ( fn )remove: ƒ ( selector )removeAttr: ƒ ( name )removeClass: ƒ ( value )removeData: ƒ ( key )removeProp: ƒ ( name )replaceAll: ƒ ( selector )replaceWith: ƒ ()resize: ƒ ( data, fn )scroll: ƒ ( data, fn )scrollLeft: ƒ ( val )scrollTop: ƒ ( val )select: ƒ ( data, fn )serialize: ƒ ()serializeArray: ƒ ()show: ƒ ( speed, easing, callback )siblings: ƒ ( until, selector )slice: ƒ ()slideDown: ƒ ( speed, easing, callback )slideToggle: ƒ ( speed, easing, callback )slideUp: ƒ ( speed, easing, callback )sort: ƒ sort()splice: ƒ splice()stop: ƒ ( type, clearQueue, gotoEnd )submit: ƒ ( data, fn )text: ƒ ( value )toArray: ƒ ()toggle: ƒ ( speed, easing, callback )toggleClass: ƒ ( value, stateVal )trigger: ƒ ( type, data )triggerHandler: ƒ ( type, data )unbind: ƒ ( types, fn )undelegate: ƒ ( selector, types, fn )unwrap: ƒ ( selector )val: ƒ ( value )width: ƒ ( margin, value )wrap: ƒ ( html )wrapAll: ƒ ( html )wrapInner: ƒ ( html )Symbol(Symbol.iterator): ƒ values()[[Prototype]]: Object[[Prototype]]: Object(0)add: ƒ ( selector, context )addBack: ƒ ( selector )addClass: ƒ ( value )after: ƒ ()ajaxComplete: ƒ ( fn )ajaxError: ƒ ( fn )ajaxSend: ƒ ( fn )ajaxStart: ƒ ( fn )ajaxStop: ƒ ( fn )ajaxSuccess: ƒ ( fn )animate: ƒ ( prop, speed, easing, callback )append: ƒ ()appendTo: ƒ ( selector )attr: ƒ ( name, value )before: ƒ ()bind: ƒ ( types, data, fn )blur: ƒ ( data, fn )change: ƒ ( data, fn )children: ƒ ( until, selector )clearQueue: ƒ ( type )click: ƒ ( data, fn )clone: ƒ ( dataAndEvents, deepDataAndEvents )closest: ƒ ( selectors, context )constructor: ƒ ( selector, context )contents: ƒ ( until, selector )contextmenu: ƒ ( data, fn )css: ƒ ( name, value )data: ƒ ( key, value )dblclick: ƒ ( data, fn )delay: ƒ ( time, type )delegate: ƒ ( selector, types, data, fn )dequeue: ƒ ( type )detach: ƒ ( selector )each: ƒ ( callback )empty: ƒ ()end: ƒ ()eq: ƒ ( i )extend: ƒ ()fadeIn: ƒ ( speed, easing, callback )fadeOut: ƒ ( speed, easing, callback )fadeTo: ƒ ( speed, to, easing, callback )fadeToggle: ƒ ( speed, easing, callback )filter: ƒ ( selector )find: ƒ ( selector )finish: ƒ ( type )first: ƒ ()focus: ƒ ( data, fn )focusin: ƒ ( data, fn )focusout: ƒ ( data, fn )get: ƒ ( num )has: ƒ ( target )hasClass: ƒ ( selector )height: ƒ ( margin, value )hide: ƒ ( speed, easing, callback )hover: ƒ ( fnOver, fnOut )html: ƒ ( value )index: ƒ ( elem )init: ƒ ( selector, context, root )innerHeight: ƒ ( margin, value )innerWidth: ƒ ( margin, value )insertAfter: ƒ ( selector )insertBefore: ƒ ( selector )is: ƒ ( selector )jquery: "3.1.1"keydown: ƒ ( data, fn )keypress: ƒ ( data, fn )keyup: ƒ ( data, fn )last: ƒ ()length: 0load: ƒ ( url, params, callback )map: ƒ ( callback )mousedown: ƒ ( data, fn )mouseenter: ƒ ( data, fn )mouseleave: ƒ ( data, fn )mousemove: ƒ ( data, fn )mouseout: ƒ ( data, fn )mouseover: ƒ ( data, fn )mouseup: ƒ ( data, fn )next: ƒ ( until, selector )nextAll: ƒ ( until, selector )nextUntil: ƒ ( until, selector )not: ƒ ( selector )off: ƒ ( types, selector, fn )offset: ƒ ( options )offsetParent: ƒ ()on: ƒ ( types, selector, data, fn )one: ƒ ( types, selector, data, fn )outerHeight: ƒ ( margin, value )outerWidth: ƒ ( margin, value )parent: ƒ ( until, selector )parents: ƒ ( until, selector )parentsUntil: ƒ ( until, selector )position: ƒ ()prepend: ƒ ()prependTo: ƒ ( selector )prev: ƒ ( until, selector )prevAll: ƒ ( until, selector )prevUntil: ƒ ( until, selector )promise: ƒ ( type, obj )prop: ƒ ( name, value )push: ƒ push()pushStack: ƒ ( elems )queue: ƒ ( type, data )ready: ƒ ( fn )remove: ƒ ( selector )removeAttr: ƒ ( name )removeClass: ƒ ( value )removeData: ƒ ( key )removeProp: ƒ ( name )replaceAll: ƒ ( selector )replaceWith: ƒ ()resize: ƒ ( data, fn )scroll: ƒ ( data, fn )scrollLeft: ƒ ( val )scrollTop: ƒ ( val )select: ƒ ( data, fn )serialize: ƒ ()serializeArray: ƒ ()show: ƒ ( speed, easing, callback )siblings: ƒ ( until, selector )slice: ƒ ()slideDown: ƒ ( speed, easing, callback )slideToggle: ƒ ( speed, easing, callback )slideUp: ƒ ( speed, easing, callback )sort: ƒ sort()splice: ƒ splice()stop: ƒ ( type, clearQueue, gotoEnd )submit: ƒ ( data, fn )text: ƒ ( value )toArray: ƒ ()toggle: ƒ ( speed, easing, callback )toggleClass: ƒ ( value, stateVal )trigger: ƒ ( type, data )triggerHandler: ƒ ( type, data )unbind: ƒ ( types, fn )undelegate: ƒ ( selector, types, fn )unwrap: ƒ ( selector )val: ƒ ( value )width: ƒ ( margin, value )wrap: ƒ ( html )wrapAll: ƒ ( html )wrapInner: ƒ ( html )Symbol(Symbol.iterator): ƒ values()[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
// $('input').val()
// ''
// $('input').val('gua')
// 'gua'

// 场景2：<span><h1>hello</h1></span>
//DOM api
// $('span')[0].innerHTML获取所有，不仅文本
// ①"<h1>hello</h1>"这是DOM（因为，jquery是数组）
// $('span')[0].innerText
// ①只能获取到"hello"文本
//jqueryAPI
//$('span')[0] 获取DOM
//$($('span')[0]) DOM转jquery对象
//$($('span')[0]).text()============="hello"
//$($('span')[0]).html()============="<h1>hello</h1>"

//$($('span')[0]).text('gua')=========[<span>gua</span>]

//<input id="id-input-add" name="name" value=""> 没有innerHTML,input是独立的标签
//<span><h1>hello</h1></span> span有inner标签

 */


/*

f. 事件
1. on 相当于addevenlistener()
2. change
//情景1：输入框：change不好用，不如keydown,keyup
//情景2：下来框：change好用；比如选择省份
// $('#id-input-add').on('keydown', function(event){
//             console.log('key down', event)
//         })
3. event.target

 */



/*
g. 数组方法
1. each
2. map
3. grep
*/



/*
h. ajax
1. contentType, dataType
 */
